<template>
    <div>
        <section>
            <el-table
                    :show-header="false"
                    :data="tableData"
                    border
                    :cell-style="columnStyle"
                    style="width: 100%; margin-top: 20px"
            >
                <el-table-column align="center" width="300" prop="amount1"></el-table-column>
                <el-table-column align="center" width="300" prop="amount2"></el-table-column>
                <el-table-column align="center" width="300" prop="amount3"></el-table-column>
                <el-table-column align="center" width="300" prop="amount4"></el-table-column>
            </el-table>
        </section>
    </div>
</template>
<script>
    export default {
        name: "mallMember-detail",
        data() {
            return {
                //请求回来的数据
                dataForm: {},
            };
        },
        computed: {
            //因为数据用到了dataform中的数据，所以写在了computed中
            tableData() {
                return [
                    {
                        amount1: "服务器操作系统：",
                        amount2: "Linux(114.55.34.251)",
                        amount3: "Web服务器：",
                        amount4: "nginx/10.2"
                    },
                    {
                        amount1: "PHP版本：",
                        amount2: "5.6.30",
                        amount3: "Mysql版本",
                        amount4: "5.5.56"
                    },
                    {
                        amount1: "安全模式:",
                        amount2: "否",
                        amount3: "安全模式GLD",
                        amount4: "否"
                    },
                    {
                        amount1: "Socket",
                        amount2: "是",
                        amount3: "时区设置",
                        amount4: "Asia/Shanghai"
                    },
                    {
                        amount1: "GD版本：",
                        amount2: "GD2(JPEG GIF PNG)",
                        amount3: "Zlib支持：",
                        amount4: "是"
                    },
                    {
                        amount1: "IP版本库：",
                        amount2: "20221024",
                        amount3: "文件上传的最大大小：",
                        amount4: "40M"
                    },
                    {
                        amount1: "程序版本：",
                        amount2: "v2.2.2 RELEASE 20170629",
                        amount3: "安装日期：",
                        amount4: "2017-05-02"
                    },
                    {
                        amount1: "编码：",
                        amount2: "UTF-8",
                        amount3: "",
                        amount4: ""
                    }
                ];
            }
        },
        methods: {
            // 自定义列背景色
            columnStyle({ row, column, rowIndex, columnIndex }) {
                if (columnIndex == 1 || columnIndex == 3) {
                    //第三第四列的背景色就改变了2和3都是列数的下标
                    return "background:#ffffff;";
                }else{
                    return "background:#f3f6fc;";
                }
            },

        }
    };
</script>


